<script lang="ts" setup>
import toLine from '@/utils';

withDefaults(
  defineProps<{
    title?: string;
    type?: 'up' | 'down';
    upIconColor?: string;
    downIconColor?: string;
    upIcon?: string;
    downIcon?: string;
  }>(),
  {
    title: '',
    type: 'up',
    upIconColor: '#f5222d',
    downIconColor: 'greenyellow',
    upIcon: 'Arrowup',
    downIcon: 'Arrowdown',
  },
);
</script>

<template>
  <div class="trend">
    <slot name="trendTitle" data="666">{{ title }}</slot>
    <div class="icon">
      <!-- <el-icon-arrowup v-if = "type === 'up'" :style="{color: upIconColor}"></el-icon-arrowup>
    <el-icon-arrowdown  v-else :style="{color: downIconColor}"></el-icon-arrowdown> -->

      <component :is="`el-icon-${toLine(upIcon)}`" v-if="type === 'up'" :style="{ color: upIconColor }"> </component>

      <component :is="`el-icon-${toLine(downIcon)}`" v-else :style="{ color: upIconColor }"> </component>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.trend {
  display: flex;
  align-items: center;
}
</style>
